<template>
	<view class="coupon-detail-wrap">
		<view class="coupon-detail-box">
			<view class="detail-box-head">
				<view class="detail-box-money">
					<text style="font-size: 98rpx;">{{detail.money}}</text>
					<text style="font-size: 39rpx;">元</text>
				</view>
				<view class="detail-box-info">
					<text style="font-size: 36rpx;">{{detail.name_buy}}</text>
					<text style="margin-top: 10rpx;font-size: 25rpx;color: #aa8c72;">{{detail.use_min>0?"指定商品满"+detail.use_min+"元使用":"无门槛"}}</text>
				</view>
			</view>
			<view class="detail-box-body">
				<view v-if="notStarted||detail.use_status!=0">
					<image class="detail-not-started-bg" src="../../static/coupon_detail_none.png" mode="widthFix">
					</image>
					<view class="detail-not-started-text">
						{{detail.use_status==1?'优惠券已核销':detail.use_status==2?'优惠券已过期':detail.use_status==3?'优惠券已作废': '优惠券未到使用时间'}}
					</view>
				</view>
				<view v-else>
					<view style="margin-top: -20rpx;margin-bottom: 10rpx;color: #f14023;">适用门店：外文书店、武汉万隆书城</view>
					<view class="detail-box-text"><text v-for="(item,index) in detail.code" :key="index">{{item}}</text>
					</view>
					<view class="detail-box-barcode">
						<tki-barcode ref="barcode" onval cid="barcode" :val="detail.code" :load-make="true" :opations="{
							width:1.5,
							height: 134,
							displayValue:false
						}" />
					</view>
					<view class="detail-box-QRcode">
						<tki-qrcode ref="qrcode" onval cid="qrcode" :val="detail.code" :size="336" unit="upx"
							:load-make="true" :show-loading="false" />
					</view>
					<view>向店员出示券码</view>
				</view>
			</view>
			<view class="detail-box-foot">
				<view class="detail-explain-headline">
					<i class="explain-dot"></i>
					<text>使用说明</text>
				</view>
				<view class="detail-explain-title">使用时间:</view>
				<view class="detail-explain-content">{{detail.use_time_start}}~{{detail.use_time_end}}</view>
				<view class="detail-explain-title">使用规则:</view>
				<view class="detail-explain-content">
					<u-parse :html="detail.use_desc" :lazy-load="true" :show-with-animation="true"></u-parse>
				</view>
			</view>
		</view>
		<router-link class="detail-bottom" to="/bundle/pages/user_coupon/user_coupon">
			<view class="detail-btn">查看其他优惠券</view>
		</router-link>
	</view>
</template>

<script>
	import tkiBarcode from '@/components/tki-barcode/tki-barcode';
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode';
	import {
		getMyCouponList
	} from "@/api/activity";
	export default {
		components: {
			tkiBarcode,
			tkiQrcode
		},
		data() {
			return {
				id: "",
				notStarted: "",
				detail: {
					money: "",
					use_min: "",
					name_buy: "",
					code: "",
					use_status: 0,
					use_time_start: "",
					use_time_end: "",
					use_desc: ""
				}
			}
		},
		onLoad() {
			const options = this.$Route.query;
			if (options && options.scene) {
				const scene = strToParams(decodeURIComponent(options.scene));
				options.id = scene.id;
			}
			this.id = options.id;
			this.getMyCouponListFun();
		},
		methods: {
			getMyCouponListFun() {
				getMyCouponList({
					ccl_id: this.id
				}).then((res) => {
					if (res.code == 1) {
						if (res.data.lists.length > 0) {
							this.detail = {
								money: res.data.lists[0].money,
								use_min: res.data.lists[0].use_min,
								name_buy: res.data.lists[0].name_buy,
								code: res.data.lists[0].code,
								use_status: res.data.lists[0].use_status,
								use_time_start: res.data.lists[0].use_time_start,
								use_time_end: res.data.lists[0].use_time_end,
								use_desc: res.data.lists[0].use_desc
							}
							if ((new Date(this.detail.use_time_start).getTime()) - (new Date().getTime()) > 0) {
								this.notStarted = true;
							} else {
								this.notStarted = false;
							}
						}
					} else {
						this.$toast({
							title: res.msg
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.coupon-detail-wrap {
		width: 100%;
		height: 100%;
		padding: 30rpx 0 100rpx;
		background-color: #feeed8;

		.coupon-detail-box {
			width: 700rpx;
			margin: 0 auto;
			padding: 0 70rpx 100rpx;
			background-color: #ffffff;
			border-radius: 20rpx;

			.detail-box-head {
				display: flex;
				height: 260rpx;
				align-items: center;

				.detail-box-money {
					color: #f14023;
				}

				.detail-box-info {
					display: flex;
					flex-direction: column;
					margin-left: 60rpx;
				}
			}

			.detail-box-body {
				height: 690rpx;
				padding-top: 50rpx;
				text-align: center;

				.detail-not-started-bg {
					width: 100%;
				}

				.detail-not-started-text {
					display: inline-block;
					width: 314rpx;
					height: 78rpx;
					margin-top: -10rpx;
					background-color: #767676;
					border-radius: 10rpx;
					font-size: 29rpx;
					color: #fef9eb;
					line-height: 78rpx;
					text-align: center;
				}

				.detail-box-text {
					display: flex;
					width: 560rpx;
					margin-bottom: 10rpx;
					font-size: 29rpx;
					justify-content: space-between;
				}

				.detail-box-barcode {
					width: 560rpx;
					margin-bottom: 10rpx;
				}

				.detail-box-QRcode {
					width: 336rpx;
					height: 336rpx;
					margin: 0 auto 20rpx;
				}
			}

			.detail-box-foot {
				padding-top: 30rpx;

				.detail-explain-headline {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					font-weight: 700;

					.explain-dot {
						display: inline-block;
						width: 14rpx;
						height: 14rpx;
						margin-right: 10rpx;
						background-color: #ed6c2c;
						border-radius: 14rpx;
					}
				}

				.detail-explain-title {
					margin-top: 20rpx;
					font-weight: 700;
				}

				.detail-explain-content {
					margin-top: 10rpx;
					color: #5e5e5e;
				}
			}
		}

		.detail-bottom {
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 168rpx;
			bottom: 0;
			background: url(../../static/coupon_detail_bottom.png) no-repeat;
			background-size: contain;

			.detail-btn {
				display: inline-block;
				width: 264rpx;
				height: 60rpx;
				margin-top: 20rpx;
				border: solid 1px #fff;
				border-radius: 60rpx;
				font-size: 29rpx;
				color: #fff;
				line-height: 60rpx;
				text-align: center;
			}
		}
	}
</style>